<template>
 <div class="articlelist pd_40">
   <div>
     <el-row :gutter="70">
      <el-col :span="7">
        <div class="fsc">
          <span class="articlelist_lable">线路名称</span>
          <el-input
            placeholder="请输入"
            v-model="input2">
          </el-input>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="fsc">
          <span class="articlelist_lable">线路时间</span>
            <el-input
            placeholder="请输入"
            v-model="input2">
            </el-input>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="fsc">
          <span class="articlelist_lable">站点数</span>
           <el-input
            placeholder="请输入"
            v-model="input2">
          </el-input>
        </div>
      </el-col>
     </el-row>
     <p class="articlelist_query fec">
      <el-button type="primary">查询</el-button>
    </p>
   </div>
   <div>
     <el-table
      :data="tableList"
      stripe
      style="width: 100%">
      <el-table-column
        prop="title"
        label="文章名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="updatetime"
        align="center"
        width="180"
        label="上架时间">
      </el-table-column>
      <el-table-column
        align="center"
        width="120"
        label="分属版块">
        <template slot-scope="scope">
          <span>{{scope.row.categories.length==0?'--':scope.row.categories.name}}</span>
        </template>
      </el-table-column>  
      <el-table-column
        label="浏览次数"
        align="center"
        width="120">
        <template slot-scope="scope">
          <span>{{scope.row.images.length}}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="comment"
        align="center"
        width="120"
        label="评论数">
      </el-table-column>
      <el-table-column
        prop="share"
        align="center"
        width="120"
        label="转发数">
      </el-table-column>
      <el-table-column
        prop="likes"
        align="center"
        width="120"
        label="点赞数">
      </el-table-column>
      <el-table-column
        prop=""
        align="center"
        width="120"
        label="收藏数">
      </el-table-column>
      <el-table-column
        prop=""
        align="center"
        width="120"
        label="乡旅计划">
      </el-table-column>
      <el-table-column
        prop=""
        align="center"
        width="120"
        label="乡旅足迹">
      </el-table-column>
      <el-table-column
        width="150"
        align="center"
        label="置顶状态">
        <template slot-scope="scope">
          <span>{{scope.row.top==11?'--':'置顶' + scope.row.top}}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="150"
        label="操作">
        <template slot-scope="scope">
        <el-button type="primary" size="small">预览</el-button>
        <el-button @click="administration(scope)" type="success" size="small">管理</el-button>
      </template>
      </el-table-column>
    </el-table>
   </div>
  <div class="block fec mg_t30">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[10]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>

  <!--点击管理alert-->
  <el-dialog
    title="置顶管理"
    :visible.sync="centerDialogVisible"
    width="30%"
    center>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="fsc">
          <p>文章名称:</p>
          <p class="mg_l15">{{dialog.title}}</p>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="fsc">
          <p>作者:</p>
          <p class="mg_l15">{{dialog.userName}}</p>
        </div>
      </el-col>
      <el-col class="mg_t30" :span="12">
        <div class="fsc">
          <p>上架日期:</p>
          <p class="mg_l15">{{dialog.updatetime}}</p>
        </div>
      </el-col>
      <el-col class="mg_t30" :span="12">
        <div class="fsc">
          <p>置顶状态:</p>
          <p class="mg_l15">22222</p>
        </div>
      </el-col>
      <el-col class="mg_t40" :span="24">
        <div class="article_dialog_button fbc fwrap">
          <el-button @click="index=1" :type="primary=index==1?'primary':''">置顶1</el-button>
          <el-button @click="index=2" :type="primary=index==2?'primary':''">置顶2</el-button>
          <el-button @click="index=3" :type="primary=index==3?'primary':''">置顶3</el-button>
          <el-button @click="index=4" :type="primary=index==4?'primary':''">置顶4</el-button>
          <el-button @click="index=5" :type="primary=index==5?'primary':''">置顶5</el-button>
          <el-button @click="index=6" :type="primary=index==6?'primary':''">置顶6</el-button>
          <el-button @click="index=7" :type="primary=index==7?'primary':''">置顶7</el-button>
          <el-button @click="index=8" :type="primary=index==8?'primary':''">置顶8</el-button>
          <el-button @click="index=9" :type="primary=index==9?'primary':''">置顶9</el-button>
          <el-button @click="index=10" :type="primary=index==10?'primary':''">置顶10</el-button>
        </div>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="centerDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="top()">确定</el-button></el-button>
    </span>
  </el-dialog>
 </div>

 
</template>
<script>
export default {
  data() {
    return {
      tableList:[],
      tableData: {
        type: 3,
        page: ''
      },
      total: null,
      dialog: {
        title: '',
        userName: '',
        updatetime: '',
      },
      isStatus: this.$utils.isStatus,
      index: 1,
      value: '',
      input2: '',
      input3: '',
      value4: '',
      value1: '',
      current: 1,
      centerDialogVisible: false,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {                    //列表
      let url = '/admin/article/query';
      let data = this.tableData;
      this.$request.post(url,data).then(res => {
        if(res.data.code == '0000') {
          console.log(res)
          this.total = res.data.data.page.total;
          this.tableList = res.data.data.list;
        }
      })
    },
    top() {
      let url = '/admin/article/top'; 
      let data = {
        top: this.index,
        id: this.dialog.id,
      }
      console.log(data)
      this.$request.post(url,data).then(res => {
        if(res.data.code == '0000') {
          console.log(res)
          this.getList()
          this.centerDialogVisible = false
        }
        
      })
    },
    administration(scope) {          //管理
      let row = scope.row;
      this.centerDialogVisible = true;
      this.dialog.id = row.id;
      this.dialog.title = row.title;
      this.dialog.userName = row.userName;
      this.dialog.updatetime = row.updatetime;
    },
  
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.tableData.page = val
      this.getList()
    },
    addPrimary(index) {
      console.log(index)
    }
  },
}
</script>
<style scoped lang="less">
  .articlelist_lable {
    min-width: 20%;
    white-space: nowrap;
  }
  .articlelist_query {
    margin-right: 100px;
    height: 100px;
  }
  .article_dialog_button  {
    border-top: 1px solid #000000;
    margin-left: 0;
    .el-button {
      min-width: 15%;
      margin: 25px 2% 0;
    }
    
  }
</style>




